<template>
  <div class="main-body">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="search"
            type="primary"
            @click="doSearch"
            :disabled="$hasBP('bnt.sysLoginLog.list')  === false"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="$hasBP('bnt.sysLoginLog.list')  === false" @click="refreshForm" icon="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <cm-table
      ref="tableRef"
      :get-page="listPage"
      :filters="filters"
      :columns="columns"
      :showOperation="false"
      :showBatchDelete="false"
    ></cm-table>
  </div>
</template>

<script setup>
import { listPage } from '@/apis/logs-visit'
import useTableHandlers from '@/apis/use-table-handlers'
const filters = reactive({
  username: ''
});
const {
  tableRef,
  doSearch,
} = useTableHandlers();
const columns = computed(() => [
  { prop: "username", label: "用户名", minWidth: 100 },
  {
    prop: "status", label: "结果", minWidth: 120, formatter: (row) => {
      return row.status ? "成功" : "失败"
    }
  },
  { prop: "ipaddr", label: "IP", minWidth: 120 },
  { prop: "accessTime", label: "访问时间", minWidth: 120 },
])
function refreshForm(){
  filters.username = ''
  doSearch()
}
</script>
